/**
 * 产品管理页面组件 - 企业金融服务产品的创建和管理界面
 *
 * 开发人员：郭畅
 * 开发时间：2025-11-15 至 2025-11-20
 * 模块职责：提供企业金融服务产品的完整管理功能，包括产品创建、编辑、删除、状态管理等
 *
 * 技术要点：
 * - 金融产品创建和编辑表单处理
 * - 产品列表展示和分页管理
 * - 产品分类和状态管理功能
 * - 美团品牌风格的产品管理界面
 * - 前后端产品管理接口集成
 *
 * 开发故事：负责产品管理页面的完整前端实现，与后端产品服务深度集成，为企业提供便捷的金融产品管理工具。
 */
<template>
  <div class="products-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">产品管理</h1>
      <p class="page-subtitle">企业金融服务产品管理与配置</p>
    </div>

    <!-- 创建新产品 -->
    <el-card class="create-card" shadow="never">
      <div slot="header" class="card-header">
        <i class="el-icon-plus-circle" style="color: var(--primary-color); margin-right: 8px;"></i>
        <span>创建新产品</span>
      </div>
      
      <el-form :model="createForm" :rules="createRules" ref="createForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="产品代码" prop="code">
              <el-input v-model="createForm.code" placeholder="请输入产品代码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品名称" prop="name">
              <el-input v-model="createForm.name" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类" prop="category">
              <el-select v-model="createForm.category" placeholder="请选择分类" style="width: 100%">
                <el-option label="贷款服务" value="贷款服务"></el-option>
                <el-option label="风险评估" value="风险评估"></el-option>
                <el-option label="财务分析" value="财务分析"></el-option>
                <el-option label="投资咨询" value="投资咨询"></el-option>
                <el-option label="资金管理" value="资金管理"></el-option>
                <el-option label="保险服务" value="保险服务"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="价格" prop="price">
              <el-input-number v-model="createForm.price" :min="0" :precision="2" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货币">
              <el-select v-model="createForm.currency" style="width: 100%">
                <el-option label="人民币 (CNY)" value="CNY"></el-option>
                <el-option label="美元 (USD)" value="USD"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="createProduct" :loading="creating">
                <i class="el-icon-check"></i> 创建产品
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="产品描述">
          <el-input type="textarea" v-model="createForm.description" placeholder="请输入产品描述" :rows="3"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 产品列表 -->
    <el-card class="list-card" shadow="never">
      <div slot="header" class="card-header">
        <i class="el-icon-goods" style="color: var(--primary-color); margin-right: 8px;"></i>
        <span>产品列表</span>
        <div class="header-actions">
          <el-button size="small" @click="loadProducts">
            <i class="el-icon-refresh"></i> 刷新
          </el-button>
        </div>
      </div>

      <el-table :data="products" v-loading="loading" stripe>
        <el-table-column prop="code" label="产品代码" width="120"></el-table-column>
        <el-table-column prop="name" label="产品名称" min-width="150"></el-table-column>
        <el-table-column prop="category" label="分类" width="100">
          <template slot-scope="scope">
            <el-tag :type="getCategoryType(scope.row.category)" size="small">
              {{ scope.row.category }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120">
          <template slot-scope="scope">
            <span class="price-text">{{ formatPrice(scope.row.price, scope.row.currency) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="160">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="editProduct(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteProduct(scope.row)" v-if="scope.row.status === 'ACTIVE'">删除</el-button>
            <el-button size="mini" type="success" @click="activateProduct(scope.row)" v-if="scope.row.status === 'INACTIVE'">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑产品对话框 -->
    <el-dialog title="编辑产品" :visible.sync="editDialogVisible" width="600px">
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="产品分类" prop="category">
          <el-select v-model="editForm.category" style="width: 100%">
            <el-option label="贷款服务" value="贷款服务"></el-option>
            <el-option label="风险评估" value="风险评估"></el-option>
            <el-option label="财务分析" value="财务分析"></el-option>
            <el-option label="投资咨询" value="投资咨询"></el-option>
            <el-option label="资金管理" value="资金管理"></el-option>
            <el-option label="保险服务" value="保险服务"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="editForm.price" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="货币">
          <el-select v-model="editForm.currency" style="width: 100%">
            <el-option label="人民币 (CNY)" value="CNY"></el-option>
            <el-option label="美元 (USD)" value="USD"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status" style="width: 100%">
            <el-option label="启用" value="ACTIVE"></el-option>
            <el-option label="禁用" value="INACTIVE"></el-option>
            <el-option label="停用" value="DISCONTINUED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品描述">
          <el-input type="textarea" v-model="editForm.description" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateProduct" :loading="updating">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from '../api/http'

export default {
  name: 'Products',
  data() {
    return {
      loading: false,
      creating: false,
      updating: false,
      products: [],
      createForm: {
        code: '',
        name: '',
        description: '',
        category: '',
        price: 0,
        currency: 'CNY'
      },
      createRules: {
        code: [{ required: true, message: '请输入产品代码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
        category: [{ required: true, message: '请选择产品分类', trigger: 'change' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
      },
      editDialogVisible: false,
      editForm: {
        id: null,
        name: '',
        description: '',
        category: '',
        price: 0,
        currency: 'CNY',
        status: 'ACTIVE'
      },
      editRules: {
        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
        category: [{ required: true, message: '请选择产品分类', trigger: 'change' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.loadProducts()
  },
  methods: {
    async loadProducts() {
      this.loading = true
      try {
        const { data } = await http.get('/enterprises/1/products')
        if (data.code === 0) {
          this.products = data.data
        }
      } catch (e) {
        this.$message.error('加载产品列表失败')
      } finally {
        this.loading = false
      }
    },
    
    async createProduct() {
      this.$refs.createForm.validate(async (valid) => {
        if (!valid) return
        
        this.creating = true
        try {
          const { data } = await http.post('/enterprises/1/products', this.createForm)
          if (data.code === 0) {
            this.$message.success('产品创建成功')
            this.resetCreateForm()
            this.loadProducts()
          } else {
            this.$message.error(data.message || '创建失败')
          }
        } catch (e) {
          this.$message.error(e.response?.data?.message || '创建失败')
        } finally {
          this.creating = false
        }
      })
    },
    
    resetCreateForm() {
      this.createForm = {
        code: '',
        name: '',
        description: '',
        category: '',
        price: 0,
        currency: 'CNY'
      }
      this.$refs.createForm.resetFields()
    },
    
    editProduct(product) {
      this.editForm = {
        id: product.id,
        name: product.name,
        description: product.description,
        category: product.category,
        price: product.price,
        currency: product.currency,
        status: product.status
      }
      this.editDialogVisible = true
    },
    
    async updateProduct() {
      this.$refs.editForm.validate(async (valid) => {
        if (!valid) return
        
        this.updating = true
        try {
          const { data } = await http.put(`/enterprises/1/products/${this.editForm.id}`, this.editForm)
          if (data.code === 0) {
            this.$message.success('产品更新成功')
            this.editDialogVisible = false
            this.loadProducts()
          } else {
            this.$message.error(data.message || '更新失败')
          }
        } catch (e) {
          this.$message.error(e.response?.data?.message || '更新失败')
        } finally {
          this.updating = false
        }
      })
    },
    
    async deleteProduct(product) {
      this.$confirm('确定要删除这个产品吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const { data } = await http.delete(`/enterprises/1/products/${product.id}`)
          if (data.code === 0) {
            this.$message.success('产品删除成功')
            this.loadProducts()
          } else {
            this.$message.error(data.message || '删除失败')
          }
        } catch (e) {
          this.$message.error(e.response?.data?.message || '删除失败')
        }
      })
    },
    
    async activateProduct(product) {
      try {
        const { data } = await http.put(`/enterprises/1/products/${product.id}`, {
          ...product,
          status: 'ACTIVE'
        })
        if (data.code === 0) {
          this.$message.success('产品启用成功')
          this.loadProducts()
        } else {
          this.$message.error(data.message || '启用失败')
        }
      } catch (e) {
        this.$message.error(e.response?.data?.message || '启用失败')
      }
    },
    
    getCategoryType(category) {
      const types = {
        '贷款服务': 'primary',
        '风险评估': 'warning',
        '财务分析': 'success',
        '投资咨询': 'primary',
        '资金管理': 'danger',
        '保险服务': 'success'
      }
      return types[category] || 'primary'
    },
    
    getStatusType(status) {
      const types = {
        'ACTIVE': 'success',
        'INACTIVE': 'warning',
        'DISCONTINUED': 'danger'
      }
      return types[status] || 'info'
    },
    
    getStatusText(status) {
      const texts = {
        'ACTIVE': '启用',
        'INACTIVE': '禁用',
        'DISCONTINUED': '停用'
      }
      return texts[status] || status
    },
    
    formatPrice(price, currency) {
      const symbol = currency === 'USD' ? '$' : '¥'
      return `${symbol}${parseFloat(price).toFixed(2)}`
    },
    
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.products-page {
  padding: 24px;
  background: var(--bg-primary);
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.create-card, .list-card {
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  animation: slideInUp 0.8s ease-out;
  transition: all var(--transition-normal);
}

.create-card:hover, .list-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.create-card::before, .list-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.create-card:hover::before, .list-card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--transition-normal);
}

.create-card:hover .card-header, .list-card:hover .card-header {
  color: var(--primary-color);
}

.header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.header-actions .el-button {
  transition: all var(--transition-normal);
}

.header-actions .el-button:hover {
  transform: scale(1.1);
}

.price-text {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 18px;
  transition: all var(--transition-normal);
}

.create-card:hover .price-text, .list-card:hover .price-text {
  color: var(--primary-dark);
  transform: scale(1.05);
}

.dialog-footer {
  text-align: right;
  padding: 20px 0;
}

/* 表格样式优化 */
:deep(.el-table) {
  animation: fadeInUp 0.8s ease-out 1.2s both;
}

:deep(.el-table th) {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--primary-color);
  transition: all var(--transition-normal);
}

:deep(.el-table tr:hover td) {
  background: var(--bg-primary) !important;
  transform: scale(1.01);
}

:deep(.el-table td) {
  transition: all var(--transition-normal);
}

/* 按钮样式优化 */
:deep(.el-button) {
  transition: all var(--transition-normal);
  border-radius: var(--radius-md);
  font-weight: 600;
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
}

:deep(.el-button--primary) {
  background: var(--primary-gradient);
  border: none;
  box-shadow: var(--primary-shadow);
}

:deep(.el-button--primary:hover) {
  box-shadow: 0 6px 20px rgba(255, 209, 0, 0.4);
}

:deep(.el-button--success) {
  background: var(--success-gradient);
  border: none;
  box-shadow: var(--success-shadow);
}

:deep(.el-button--success:hover) {
  box-shadow: 0 6px 20px rgba(6, 192, 95, 0.4);
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #ff5757 0%, #ff4757 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(255, 87, 87, 0.3);
}

:deep(.el-button--danger:hover) {
  box-shadow: 0 6px 20px rgba(255, 87, 87, 0.4);
}

/* 状态标签样式 */
:deep(.el-tag) {
  border-radius: var(--radius-lg);
  font-weight: 700;
  padding: 6px 16px;
  border: none;
  transition: all var(--transition-normal);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

:deep(.el-tag:hover) {
  transform: scale(1.05);
}

:deep(.el-tag--success) {
  background: var(--success-gradient);
  color: var(--text-white);
  box-shadow: var(--success-shadow);
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #ff8f1f 0%, #ff6b35 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(255, 143, 31, 0.3);
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #ff5757 0%, #ff4757 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(255, 87, 87, 0.3);
}

:deep(.el-tag--primary) {
  background: linear-gradient(135deg, #3d7eff 0%, #2c5ce6 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(61, 126, 255, 0.3);
}

:deep(.el-tag--info) {
  background: linear-gradient(135deg, #2c3e8f 0%, #1e2a6b 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(44, 62, 143, 0.3);
}

/* 输入框样式优化 */
:deep(.el-input__inner) {
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: all var(--transition-normal);
  background: var(--bg-primary);
}

:deep(.el-input__inner:focus) {
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.1);
  transform: translateY(-1px);
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__inner) {
  text-align: center;
}

/* 选择器样式优化 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__inner) {
  border-radius: var(--radius-md);
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background: var(--primary-gradient);
  color: var(--text-primary);
  font-weight: 700;
  padding: 20px 24px;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

/* 动画关键帧 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .create-card, .list-card {
    margin-bottom: 16px;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
}

/* 加载状态 */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
</style>
